<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>
<!--
        vue的生命周期
        vue创建  => vue实例的销毁   需要经过8个生命周期函数(钩子函数)   生命周期函数都是在对应的阶段自动调用

        初始化阶段
           beforeCreate:  当该函数被执行时  vue实例刚完成事件和生命周期函数的初始化操作
           created:
               1.当该函数被执行时  vue实例刚完成语法校验,data数据的代理  ...
               2.当前函数是后期web项目开发时 最早发送异步请求的位置
           beforeMount:   当该函数被执行时  vue实例刚完成模板的编译,没有替换页面中的内容
           mounted:       当该函数被执行时  vue实例刚完成编译结果的替换
        运行阶段
           beforeUpdate:  当该函数被执行时  页面中展示的数据还没有被替换  获取的值还是原来的数据
           updated:       当该函数被执行时  页面中展示的数据已经被你替换  获取的是最新数据
         注: 以上两个函数的执行需要data中的数据被改变, 一旦数据改变则两个函数会自动执行
        销毁阶段
           beforeDestroy
           destroyed
            注: 以上两个函数是在vm实例销毁时自动多个,两个函数执行完毕后 vm实例销毁完成  不在监听数据的改变 卸载子组件

-->

<div id="app">
    <h2>Vue的生命周期</h2>
    <input type="text" v-model="info">
    <p id="info">{{info}}</p>
</div>

<script >

    let vm = new Vue({
        el:'#app',
        data:{
            info:'hello vue',
            users:[]
        },
        methods:{

        },
        beforeCreate(){
            /*
            * 能否发送异步请求 ?
            * 能  但是,不是发送异步请求的最佳位置 无法实现数据的赋值操作 this.users = undefined
            *  $.ajax('',{},function(res){ this.users = res.data})
            * */
            console.log("-------------beforeCreate()--------------")
            console.log("this.info=>"+this.info)
        },
        created(){
            //  能否发送异步请求 ?  能    是发送异步请求的最早的位置
            console.log("------------- created()--------------")
            console.log("this.info=>"+this.info)
        },
        beforeMount(){
            console.log("-------------beforeMount()--------------")
            let innerText = document.getElementById("info").innerText;
            console.log("innerText=>",innerText)
        },
        mounted(){
            console.log("------------- mounted()--------------")
            let innerText = document.getElementById("info").innerText;
            console.log("innerText=>",innerText)
        },
        beforeUpdate(){
            console.log("-------------beforeUpdate--------------")
            let innerText = document.getElementById("info").innerText;
            console.log("innerText=>",innerText)
        },
        updated(){
            console.log("------------- updated()--------------")
            let innerText = document.getElementById("info").innerText;
            console.log("innerText=>",innerText)
        },
        beforeDestroy(){
            console.log("-------------beforeDestroy--------------")
        },
        destroyed(){
            console.log("-------------destroyed()--------------")
        }
      })
</script>
</body>
</html>